<template>
    <div class="app-container tz-app">
        <!-- 列表 -->
        <div class="tz-table-box">
            <el-button @click="handleAdd" class="bt-yellow-node node-add">新建台站</el-button>
            <!-- <el-button @click="getList" class="bt-yellow-node node-add"
                style="margin-right: 100px;background-color:burlywood">刷新</el-button> -->
            <el-table class="zt-table" :data="nodeList" v-loading="loading" style="padding-top: 20px;"
                height="calc(100vh - 108px)">
                <el-table-column type="index" width="50"> </el-table-column>
                <el-table-column show-overflow-tooltip label="台站名称" align="center" prop="regionalNodeName" />
                <!-- <el-table-column show-overflow-tooltip label="类型" align="center" prop="regionalNodeType" /> -->
                <el-table-column show-overflow-tooltip label="机房数" align="center" prop="pltMachineRoomList"
                    :formatter="getNumber" />
                <el-table-column show-overflow-tooltip label="电台数" align="center" prop="radioNumber" />
                <el-table-column show-overflow-tooltip label="天线数" align="center" prop="pltAntennaList"
                    :formatter="getNumber" />
                <el-table-column show-overflow-tooltip label="摄像头数" align="center" prop="pltCameraList"
                    :formatter="getNumber" />
                <el-table-column show-overflow-tooltip label="室外温度℃" align="center" prop="C14" :formatter="getUnit" />
                <el-table-column show-overflow-tooltip label="室外湿度hPa" align="center" prop="C15" :formatter="getUnit" />
                <el-table-column show-overflow-tooltip label="室外风速m/s" align="center" prop="C11" :formatter="getUnit" />
                <el-table-column show-overflow-tooltip label="室外风力(级)" align="center" prop="C11"
                    :formatter="getLevel" />
                <el-table-column show-overflow-tooltip label="室外风向" align="center" prop="C12" :formatter="getUnit" />
                <!-- <el-table-column show-overflow-tooltip label="室外气压(Pa)" align="center" prop="ad" :formatter="()=>'！'"/> -->
                <el-table-column show-overflow-tooltip label="雨量(mm)" align="center" prop="C13" />
                <el-table-column show-overflow-tooltip label="离线摄像头" align="center" prop="pltCameraList"
                    :formatter="getOfflineNumber" />
                <el-table-column show-overflow-tooltip label="离线电台" align="center" prop="offlineRadioNumber" />
                <el-table-column show-overflow-tooltip label="故障天线" align="center" prop="pltAntennaList"
                    :formatter="getOfflineNumber" />
                <el-table-column show-overflow-tooltip label="现场协管员" align="center" prop="contacts"/>
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150">
                    <template slot-scope="{row}">
                        <el-tooltip placement="bottom">
                            <div slot="content" class="bottom-content">
                                现场协管员：{{ row.contacts }}<br/>
                                联系电话：{{ row.contactPhone }}<br/>
                                微信：{{ row.contactWechat }}<br/>
                                快递地址：{{ row.deliveryAddress }}<br/>
                            </div>
                            <img class="icon-img" src="@/assets/images/ddi.png" style="margin-right: 10px;">
                        </el-tooltip>
                        <img class="icon-img" title="编辑" @click.stop="handleUpdate(row)"
                            src="@/assets/images/edit.png" style="margin-right: 10px;">
                        <img v-if="noDelete(row)" class="icon-img" title="不可删除"
                            src="@/assets/images/no-delete.png">
                        <img v-else class="icon-img" title="删除" @click="handleDelete(row)"
                            src="@/assets/images/delete-bin2.png">
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!-- 新增、修改 -->
        <right-dialog :title="title" :visible="open" @closeDialog="cancel">
            <template v-slot:default>
                <edit-node v-if="open" :editId="editId" @close="cancel" @change="editChange"></edit-node>
            </template>
        </right-dialog>

    </div>
</template>

<script>
import { getlistNode, delNode } from "@/api/business/node";
import RightDialog from "@/components/TZ/RightDialog"
import editNode from "./components/edit-node.vue"


export default {
    name: "Node",
    components: { RightDialog, editNode},
    data() {
        return {
            // 当前修改的机房id
            editId: null,
            // 遮罩层
            loading: true,
            // 台站表格数据
            nodeList: [],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,



            webRtcServer: null
        };
    },
    created() {
        this.getList();
    },
    methods: {
        /** 查询台站列表 */
        getList() {
            this.loading = true;
            getlistNode().then(rs => {
                this.formartNodeList(rs.rows);
                console.log("this.nodeList:", this.nodeList)
                this.loading = false;
            }).catch(er => {
                this.$message.error("查询失败")
                this.loading = false;
            });
        },
        // 是否可以删除台站
        noDelete(row) {
            // 是否存在天线
            if (row.pltAntennaList && row.pltAntennaList.length > 0) {
                return true;
            }
            // 是否存在摄像头
            if (row.pltCameraList && row.pltCameraList.length > 0) {
                return true;
            }
            // 是否存在机房
            if (row.pltMachineRoomList && row.pltMachineRoomList.length > 0) {
                return true;
            }
            // 是否存在传感器 
            if (row.pltSensorList && row.pltSensorList.length > 0) {
                return true;
            }
            return false;
        },
        // 格式化台站数据
        formartNodeList(list) {
            this.nodeList = list.map(item => {
                // 电台数量
                let radioNumber = 0;
                // 离线电台数量
                let offlineRadioNumber = 0;
                // 传感器数据
                let sensor = {};
                if (item.pltMachineRoomList && item.pltMachineRoomList.length > 0) {
                    const roomList = item.pltMachineRoomList;
                    for (let i = 0; i < roomList.length; i++) {
                        const radioList = roomList[i].pltRadioStationList;
                        if (radioList && radioList.length > 0) {
                            radioNumber += radioList.length;
                            const offlineRadio = radioList.filter(item => item.status != '0');
                            offlineRadioNumber += offlineRadio.length;
                        }
                    }
                }
                if (item.pltSensorList && item.pltSensorList.length == 1) sensor = this.parseJsonString(item.pltSensorList[0]);
                item.radioNumber = radioNumber;
                item.offlineRadioNumber = offlineRadioNumber;
                Object.assign(item, sensor);
                // 电台数量
                return item
            })
        },
        //将字符串解析成对象
        parseJsonString(jsonString) {
            if (!jsonString.sensorAttribute) return {};
            const string = JSON.parse(jsonString.sensorAttribute);
            return string

        },
        // 格式化获取的数量
        getNumber(row, column, cellValue, index) {
            if (!cellValue) return 0;
            return cellValue.length
        },
        // 格式化传感器数据
        getUnit(row, column, cellValue, index) {
            if (!cellValue) return 0;
            return Number(cellValue) / 10
        },
        // 格式化风力级别
        getLevel(row, column, cellValue, index) {
            if (typeof cellValue != 'number') return '0';
            cellValue = Number(cellValue);
            console.log("cellValue:", cellValue)
            switch (true) {
                case (cellValue >= 0 && cellValue <= 0.2):
                    return '0'
                case (cellValue >= 0.3 && cellValue <= 1.5):
                    return '1'
                case (cellValue >= 1.6 && cellValue <= 3.3):
                    return '2'
                case (cellValue >= 3.4 && cellValue <= 5.4):
                    return '3'
                case (cellValue >= 5.5 && cellValue <= 7.9):
                    return '4'
                case (cellValue >= 8 && cellValue <= 10.7):
                    return '5'
                case (cellValue >= 10.8 && cellValue <= 13.8):
                    return '6'
                case (cellValue >= 13.9 && cellValue <= 17.1):
                    return '7'
                case (cellValue >= 17.2 && cellValue <= 20.7):
                    return '8'
                case (cellValue >= 20.8 && cellValue <= 24.4):
                    return '9'
                case (cellValue >= 24.5 && cellValue <= 28.4):
                    return '10'
                case (cellValue >= 28.5 && cellValue <= 32.6):
                    return '11'
                case (cellValue >= 32.7 && cellValue <= 36.9):
                    return '12'
                case (cellValue >= 37 && cellValue <= 41.4):
                    return '13'
                case (cellValue >= 41.5 && cellValue <= 46.1):
                    return '14'
                case (cellValue >= 46.2 && cellValue <= 50.9):
                    return '15'
                case (cellValue >= 51 && cellValue <= 56):
                    return '16'
                case (cellValue > 56):
                    return '17'
                default:
                    return '0'
            }
        },
        // 格式化离线数量
        getOfflineNumber(row, column, cellValue, index) {
            if (!cellValue) return 0;
            const list = cellValue.filter(item => item.status != '0');
            return list.length
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.editId = null;
            this.title = "添加台站";
            this.open = true;
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            this.editId = row.regionalNodeId;
            this.title = "修改台站";
            this.open = true;
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            this.$confirm('确认删除台站编号为《' + row.regionalNodeId + '》的台站？').then(() => {
                delNode(row.regionalNodeId).then(rs => {
                    if (rs.code == 200) {
                        this.$message.success("删除成功");
                        this.getList();
                    } else {
                        this.$message.error("删除失败")
                    }
                })


            }).catch(() => { });
        },
        // 新增或者修改成功事件
        editChange() {
            this.open = false;
            this.editId = null;
            this.getList();
        },
        // 新增修改关闭弹窗事件
        cancel() {
            this.open = false;
            this.editId = null;
        }
    }
};
</script>


<style scoped>
.node-add {
    position: absolute;
    z-index: 1;
    right: 20px;
    top: 20px;
}

.tz-table-box {
    padding-right: 0;
    padding-top: 30px;
    overflow: auto;
}
.bottom-content{
    font-size: 14px;
}
</style>